<template>
  <div>
    <div class="header">
      <woco></woco>
    </div>
  <div class="b-container">
     <!-- 标题部分 -->
    <!--主体  -->
    <div class="b-wrap">
      <div class="title">
        <div class="title-text">
          <span class="span1">01</span>
          <div class="title-text2">
            <span class="span2">关于我们</span><br />
            <span class="span3">ABOUT US</span>
          </div>
        </div>
      </div>
      <div class="content">
        <div class="content-img">
          <img
            src="https://p1.ssl.qhimg.com/dr/220__/t01eeee31b69f870114.jpg"
            alt=""
          />
        </div>
        <div class="content-text">
          <p>
            伍仁行家政始创于2009年7月，是一家具有国际化管理创新性服务直营连锁式家庭服务公司，目前会员客户逾万家，是中国家庭服务业协会会员单位，江苏诚信服务单位，是南京首家实行员工制管理，首家推出家政卡并改变销售模式的家政服务企业，公司以三高为路线：高标准；高质量；高效率。三省为宗旨：省时；省力；省心。内部实行六统一营销模式。明确了“国际标准管理；精益求精质量；满足客户需求；积极持续改进”核心方针，以客户至上，全心服务；专业、价值、品质；打造现代家政服务品牌。公司主要有室内物品保洁和中高档家具养护及清洁用品研发和制造所组成，随时为客户提供安全、方便、快捷、专业的家政服务。
          </p>
        </div>
      </div>
      <div class="title">
        <div class="title-text">
          <span class="span1">02</span>
          <div class="title-text2">
            <span class="span2">优质服务</span><br />
            <span class="span3">Afirst-rate service</span>
          </div>
        </div>
      </div>
      <div class="servebox">
          <div class="item" v-for="(list ,i) in imgdata" :key="i">
            <div class="serve-img" @click="fn('/recommend')">
              <img :src="list.img" alt="">
              <div class="shade">{{list.content}}</div>
              </div>
              <div class="serve-text">{{list.text}}</div>
          </div>
      </div>
      <div class="title">
        <div class="title-text">
          <span class="span1">03</span>
          <div class="title-text2">
            <span class="span2">专业培训</span><br />
            <span class="span3">vocational training</span>
          </div>
        </div>
      </div>
      <div class="trainbox">
        <el-carousel :interval="5000" arrow="always"  height="400px">
          <el-carousel-item v-for="(item, i) in servedata" :key="i">
            <img :src="item.img" alt="" />
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="title">
        <div class="title-text">
          <span class="span1">04</span>
          <div class="title-text2">
            <span class="span2">安全保障</span><br />
            <span class="span3">security assurance</span>
          </div>
        </div>
      </div> 
      <div class="securitybox">
        <ul class="layer2">
          <li class="list">
            <div class="list-main">
              <div class="list-img">
                <img src="./img3/img1.png" alt="">
              </div>
              <div class="list-text">健康审核</div>
            </div>
          </li>
          <li class="list">
            <div class="list-main">
              <div class="list-img">
                <img src="./img3/img2.jpg" alt="">
              </div>
              <div class="list-text">实名认证</div>
            </div>
          </li>
          <li class="list">
            <div class="list-main">
              <div class="list-img">
                <img src="./img3/img3.jpg" alt="">
              </div>
              <div class="list-text">人脸识别</div>
            </div>
          </li>
          <li class="list">
            <div class="list-main">
              <div class="list-img">
                <img src="./img3/img4.png" alt="">
              </div>
              <div class="list-text">信息校验系统</div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="c"></div>
    <commenfooter/>
  </div>
  </div>
</template>

<script>
import commenfooter from '../filsh/commenfooter'
import woco from './Nav'
export default {
  components:{
    commenfooter,
    woco
  },
  data() {
    return {
      login: "",
      // a: " ",
      imgdata: [
        {
        img:require("./img2/img1.jpg"),
        text:"家庭服务",
        content:"家居保洁、衣物洗涤"
        },
        {
        img:require("./img2/img2.jpg"),
        text:"家庭护理",
         content:"家居保洁、衣物洗涤"
        },
        {
        img:require("./img2/img3.jpg"),
        text:"家宴服务",
         content:"家居保洁、衣物洗涤"
        },
        {
        img:require("./img2/img4.jpg"),
        text:"母婴护理",
         content:"家居保洁、衣物洗涤"
        },
        {
        img:require("./img2/img1.jpg"),
        text:"幼儿拖管",
         content:"家居保洁、衣物洗涤"
        },
        {
        img:require("./img2/img1.jpg"),
        text:"宠物拖管",
         content:"家居保洁、衣物洗涤"
        },
        {
        img:require("./img2/img1.jpg"),
        text:"公司保洁",
         content:"家居保洁、衣物洗涤"
        },
        {
        img:require("./img2/img1.jpg"),
        text:"维修服务",
         content:"家居保洁、衣物洗涤"
        },
      ],
      servedata:[
       {img:require("./img4/img1.jpg")},
       {img:require("./img4/img2.jpg")},
       {img:require("./img4/img3.jpg")},
       {img:require("./img4/img4.jpg")},
       {img:require("./img4/img5.jpg")},
       {img:require("./img4/img6.jpg")},
       {img:require("./img4/img7.jpg")},
       {img:require("./img4/img8.jpg")},
      ],

       navdata: [
        { id: "1", cont: "关于我们" },
        { id: "2", cont: "优优BABY" },
        { id: "3", cont: "高端家政" },
        { id: "4", cont: "管家服务" },
        { id: "5", cont: "加盟" },
      ],
    };
  },
  methods:{
    //  jump(){
    //   var a = localStorage.getItem('token');
    //   console.log(a);
    //   if(a=='false'){
    //     console.log(1);
    //     this.$router.push({path:'/about'})
    //   }else{
    //     if(a==null){
    //       this.$router.push({path:'/about'})
    //     }else{
    //       console.log(0);
    //       this.$router.push({path:'/personal'})
    //     }
    //   }
    // },
      fn(url){
      this.$router.push(url);
    },

     page(i) {
      if (i == 0) {
        this.$router.push("/brief");
      }
      if (i >= 1) {
        let arr1 = this.$refs.ha;
        for (let j = 0; j < arr1.length; j++) {
          this.navdata[j].fnDiv = false;
          console.log(11111);
        }
        console.log(22222);
        this.navdata[i].fnDiv = true;
      }
     },
    pageone(){
      this.$router.push({path:'/'})
    }
  },
   mounted() {
    // if (this.a === "1") {
    //   this.login = "个人中心";
    // } else {
    //   this.login = "登录";
    // }
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.b-container {
  width: 80%;
  margin: 0 auto;
}
.content {
  display: flex;
  /* height: 300px; */
}
.content-img {
  width: 30%;
  height: 100%;
}
.content-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.content-text {
  width: 70%;
  padding: 20px;
  text-indent: 2em;
  line-height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1em;
  color: #777;
}
.content-text:hover{
  color: blueviolet;
}
.title {
  /* width: ; */
  background:  rgb(245, 84, 106);
  border-radius: 5px;
  height: 80px;
  margin: 20px 0;
}
.title-text {
  height: 60px;
  display: flex;
}
.title-text2 {
  padding-top: 30px;
  margin-left: 15px;
}
.title-text2 span{
  /* color: rgb(245, 84, 106); */
  color: white;
   font-style: oblique;
}
.title .span1 {
  display: inline-block;
  width: 60px;
  height: 60px;
  background: white;
  /* background: rgb(245, 84, 106); */
  line-height: 60px;
  margin-top: 10px;
  margin-left: 20px;
  text-align: center;
  font-size: 24px;
  font-style: oblique;
  position: relative;
}
.title .span1::after {
  display: block;
  content: "";
  height: 50px;
  border-right: 2px solid #cccccc;
  position: absolute;
  top: 5px;
  left: 60px;
  transform: rotate(37deg);
}
.servebox {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  flex-direction: row;
}
.item{
  width: 23%;
  height: 280px;
  /* margin-left: 10px; */
  margin-bottom: 30px;
  transform: scale(1);
  transition: transform 0.5s ease 0s;
}
.item:hover {
  transform: scale(1.05);
}
.item:hover .shade{
    /* display: block; */
    transform: scaleX(1);
    transform-origin: 0 0;
}
.serve-img {
  width: 100%;
  height: 250px;
  position: relative;
}
.serve-img img{
  object-fit:cover;
  width: 100%;
  height: 100%;
}
.shade{
  position: absolute;
  width: 90%;
  height: 90%;
  color: white;
  text-align: center;
  padding: 30%;
  top: 5%;
  right: 5%;
  /* display: none; */
  background: rgba(128, 128,128, 0.7);
  box-sizing: border-box;

  transform: scaleX(0);
  transition: transform .5s;
  transform-origin: 100% 0;
}
.current{
  display: block;
}
.serve-text{
  width: 100%;
  text-align: center;
  line-height: 30px;
  border: 1px solid rgb(245, 84, 106);
  box-sizing: border-box;
}
.serve-text:hover{
  color:rgb(245, 84, 106);
}

/* 轮播图 */
.el-carousel__item img {
 width: 100%;
 height: 100%;
 /* object-fit: cover; */
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.el-carousel__arrow{
  background-color: teal !important;
}
/* .el-carousel__arrow{
  width: 50px;
  height: 50px;
  background:rgb(245, 84, 106);
} */

/* 安全保障 */
.securitybox .layer2{
  display: flex;
  justify-content: space-between;
}
.layer2 .list{
  width: 25%;
  height: 200px;
  margin: 5px;
  transform: scale(1);
  transition: transform 0.5s ease 0s;

}
.layer2 .list:hover {
  transform: scale(1.05);
}
.layer2 .list-img img{
  width: 100%;
  height: 200px;
}
.list-text{
  text-align: center;
}
.list-text:hover{
  color: rgb(245, 84, 106);
}

/* 头部 */

.c{
  width: 100%;
  height: 60px;
}
</style>